<template>
	<view>

		<!-- 轮播图的区域 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item>
				<view class="swiper-item" id="swiper1">
					<image src="@/static/swiper/3.png"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item" id="swiper1">
					<image src="@/static/swiper/2.png"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item" id="swiper1">
					<image src="@/static/swiper/1.png"></image>
				</view>
			</swiper-item>

		</swiper>
		<view>
			<image src="@/static/my-icons/gonggao.png" class="image1">公告</image>
		</view > 
		<view style="text-align: left; height: 100rpx;font-size: 30rpx;background-color: skyblue;" >
					<text>暂无公告</text>
		</view>
		<!-- 功能图标 -->
		<view>
			<image src="@/static/my-icons/gongneng.png" class="image1">功能</image>
		</view>
		<!-- 功能区域 -->
		<view class="floor-img-box">
			<view class="left-img-box">
				<view class="left-img-item1" >
					<image src="@/static/image/1.jpg" class="floor-title1"></image>
					<span class="floor-text1">日常出车</span>
					<span class="floor-text2">完成勘探</span>
					<span class="floor-text3">点击查看></span>
				</view>
				<view class="left-img-item4">
					<image src="@/static/image/4.jpg" class="floor-title4">
						<span class="floor-text1">意见反馈</span>
						<span class="floor-text2">填写你的建议</span>
						<span class="floor-text3">点击查看></span>
					</image>
				</view>
			</view>
			<view class="right-img-box">
				<view class="right-img-item2">
					<image src="@/static/image/2.jpg" class="floor-title2"></image>
					<span class="floor-text1">探测记录</span>
					<span class="floor-text2">查看所有探测</span>
					<span class="floor-text3">点击查看></span>
				</view>
				<view class="right-img-item3">
					<image src="@/static/image/3.jpg" class="floor-title3"></image>
					<span class="floor-text1">日常出车</span>
					<span class="floor-text2">完成勘探</span>
					<span class="floor-text3">点击查看></span>
				</view>
				<view class="right-img-item5">
					<image src="@/static/image/5.jpg" class="floor-title5"></image>
					<span class="floor-text1">日常出车</span>
					<span class="floor-text2">完成勘探</span>
					<span class="floor-text3">点击查看></span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [{
						"image_src": "./pages/home/swiper/1.png",
						"open_type": "navigate",
						"goods_id": 129,
						"navigator_url": "/pages/goods_detail/main?goods_id=129"
					},
					{
						"image_src": "./pages/home/swiper/2.png",
						"open_type": "navigate",
						"goods_id": 395,
						"navigator_url": "/pages/goods_detail/main?goods_id=395"
					},
					{
						"image_src": "./pages/home/swiper/3.png",
						"open_type": "navigate",
						"goods_id": 38,
						"navigator_url": "/pages/goods_detail/main?goods_id=38"
					}
				]
			};
		},
		onLoad() {
			// this.getSwiperList()
		},
		methods: {
			// async getSwiperList() {
			// 	// const {data:res}=await uni.$http.get('/api/public/v1/home/swiperdata')
			// 	// if(res.meta.status !== 200){
			// 	// 	return uni.showToast({
			// 	// 		title: '数据请求失败！',
			// 	// 		duration:1500,
			// 	// 		icon:none
			// 	// 	})
			// 	// }
			// 	// this.swiperList = res.message
			// 	const res = await uni.$http.get('https://api.apiopen.top/musicRankings')
			// 	console.log(res)
			// }
		navClickHandler(){
			uni.switchTab({
				url:'/pages/my/my'
			})
		}
		}
	}
</script>

<style lang="scss">
	swiper {
		height: 300rpx;

		.swiper-item,
		image {
			width: 100%;
			height: 100%;
		}
	}

	.image1 {
		width: 50rpx;
		height: 50rpx;
		vertical-align: middle;
	}

	.floor-img-box {
		display:flex;
		justify-content: space-around;
		.right-img-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			.right-img-item2 {
				position: relative;
				.floor-title2 {
					width: 430rpx;
					height: 300rpx;
				}
				.floor-text1 {
					position: absolute;
					/*文字容器绝对定位*/
					display: block;
					/*span转为块元素*/
					width: 100%;
					/*宽度相对于父容器100%*/
					text-align: center;
					/*文字居中*/
					top: 25rpx; 
					left:100rpx;
					/*距离父容器顶部0*/
					color: white;
					/*文字颜色红色*/
					font-size: 42rpx;
					font-weight: bold;
					/*文字加粗*/
				}
				
				.floor-text2 {
					position: absolute;
					/*文字容器绝对定位*/
					display: block;
					/*span转为块元素*/
					width: 100%;	
					/*宽度相对于父容器100%*/
					text-align: center;
					/*文字居中*/
					top: 80rpx;
					left:100rpx;
					/*距离父容器顶部0*/
					color: white;
					/*文字颜色红色*/
					font-size: 30rpx;
					// font-weight:bold;/*文字加粗*/
				}
				
				.floor-text3 {
					position: absolute;
					/*文字容器绝对定位*/
					display: block;
					/*span转为块元素*/
					width: 100%;
					/*宽度相对于父容器100%*/
					text-align: center;
					/*文字居中*/
					top: 120rpx;
					left:100rpx;
					/*距离父容器顶部0*/
					color: white;
					/*文字颜色红色*/
					font-size: 30rpx;
					// font-weight:bold;/*文字加粗*/
				}
			}
			.right-img-item3 {
				position: relative;
			
				.floor-title3 {
					width: 200rpx;
					height: 300rpx;
				}
				.floor-text1 {
					position: absolute;
					/*文字容器绝对定位*/
					display: block;
					/*span转为块元素*/
					width: 100%;
					/*宽度相对于父容器100%*/
					text-align: center;
					/*文字居中*/
					top: 25rpx; 
					// left:100rpx;
					/*距离父容器顶部0*/
					color: white;
					/*文字颜色红色*/
					font-size: 42rpx;
					font-weight: bold;
					/*文字加粗*/
				}
				
				.floor-text2 {
					position: absolute;
					/*文字容器绝对定位*/
					display: block;
					/*span转为块元素*/
					width: 100%;	
					/*宽度相对于父容器100%*/
					text-align: center;
					/*文字居中*/
					top: 80rpx;
					// left:100rpx;
					/*距离父容器顶部0*/
					color: white;
					/*文字颜色红色*/
					font-size: 30rpx;
					// font-weight:bold;/*文字加粗*/
				}
				
				.floor-text3 {
					position: absolute;
					/*文字容器绝对定位*/
					display: block;
					/*span转为块元素*/
					width: 100%;
					/*宽度相对于父容器100%*/
					text-align: center;
					/*文字居中*/
					top: 120rpx;
					// left:100rpx;
					/*距离父容器顶部0*/
					color: white;
					/*文字颜色红色*/
					font-size: 30rpx;
					// font-weight:bold;/*文字加粗*/
				}
			}
			.right-img-item5 {
				position: relative;
			
				.floor-title5 {
					width: 200rpx;
					height: 300rpx;
				}
				.floor-text1 {
					position: absolute;
					/*文字容器绝对定位*/
					display: block;
					/*span转为块元素*/
					width: 100%;
					/*宽度相对于父容器100%*/
					text-align: center;
					/*文字居中*/
					top: 25rpx; 
					// left:100rpx;
					/*距离父容器顶部0*/
					color: white;
					/*文字颜色红色*/
					font-size: 42rpx;
					font-weight: bold;
					/*文字加粗*/
				}
				
				.floor-text2 {
					position: absolute;
					/*文字容器绝对定位*/
					display: block;
					/*span转为块元素*/
					width: 100%;	
					/*宽度相对于父容器100%*/
					text-align: center;
					/*文字居中*/
					top: 80rpx;
					// left:100rpx;
					/*距离父容器顶部0*/
					color: white;
					/*文字颜色红色*/
					font-size: 30rpx;
					// font-weight:bold;/*文字加粗*/
				}
				
				.floor-text3 {
					position: absolute;
					/*文字容器绝对定位*/
					display: block;
					/*span转为块元素*/
					width: 100%;
					/*宽度相对于父容器100%*/
					text-align: center;
					/*文字居中*/
					top: 120rpx;
					// left:100rpx;
					/*距离父容器顶部0*/
					color: white;
					/*文字颜色红色*/
					font-size: 30rpx;
					// font-weight:bold;/*文字加粗*/
				}
			}
		}

		.left-img-box {
			.left-img-item1 {
				position: relative;

				.floor-title1 {
					width: 300rpx;
					height: 300rpx;
				}

				.floor-text1 {
					position: absolute;
					/*文字容器绝对定位*/
					display: block;
					/*span转为块元素*/
					width: 100%;
					/*宽度相对于父容器100%*/
					text-align: center;
					/*文字居中*/
					top: 25rpx;
					/*距离父容器顶部0*/
					color: orange;
					/*文字颜色红色*/
					font-size: 42rpx;
					font-weight: bold;
					/*文字加粗*/
				}

				.floor-text2 {
					position: absolute;
					/*文字容器绝对定位*/
					display: block;
					/*span转为块元素*/
					width: 100%;	
					/*宽度相对于父容器100%*/
					text-align: center;
					/*文字居中*/
					top: 80rpx;
					/*距离父容器顶部0*/
					color: orange;
					/*文字颜色红色*/
					font-size: 30rpx;
					// font-weight:bold;/*文字加粗*/
				}

				.floor-text3 {
					position: absolute;
					/*文字容器绝对定位*/
					display: block;
					/*span转为块元素*/
					width: 100%;
					/*宽度相对于父容器100%*/
					text-align: center;
					/*文字居中*/
					top: 120rpx;
					/*距离父容器顶部0*/
					color: orange;
					/*文字颜色红色*/
					font-size: 30rpx;
					// font-weight:bold;/*文字加粗*/
				}
			}

			.left-img-item4 {
				position: relative;

				.floor-title4 {
					width: 300rpx;
					height: 300rpx;
				}

				.floor-text1 {
					position: absolute;
					/*文字容器绝对定位*/
					display: block;
					/*span转为块元素*/
					width: 100%;
					/*宽度相对于父容器100%*/
					text-align: center;
					/*文字居中*/
					top: 25rpx;
					/*距离父容器顶部0*/
					color: green;
					/*文字颜色红色*/
					font-size: 42rpx;
					font-weight: bold;
					/*文字加粗*/
				}

				.floor-text2 {
					position: absolute;
					/*文字容器绝对定位*/
					display: block;
					/*span转为块元素*/
					width: 100%;
					/*宽度相对于父容器100%*/
					text-align: center;
					/*文字居中*/
					top: 80rpx;
					/*距离父容器顶部0*/
					color: green;
					/*文字颜色红色*/
					font-size: 30rpx;
					// font-weight:bold;/*文字加粗*/
				}

				.floor-text3 {
					position: absolute;
					/*文字容器绝对定位*/
					display: block;
					/*span转为块元素*/
					width: 100%;
					/*宽度相对于父容器100%*/
					text-align: center;
					/*文字居中*/
					top: 120rpx;
					/*距离父容器顶部0*/
					color: green;
					/*文字颜色红色*/
					font-size: 30rpx;
					// font-weight:bold;/*文字加粗*/
				}
			}

		}
	}
</style>
